<template>
  <div class="good-box">
    <!-- 左侧 -->
    <div class="lef">
      <ul>
        <li
          v-for="item in list"
          :key="item.name"
          :class="item.name === curStr ? 'active' : ''"
          @click="changeRig(item.name)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <!-- 右侧 -->
    <div class="rig">
      <ul>
        <li v-for="item in list" :key="item.name" :id="item.name">
          <h3>{{ item.name }}</h3>
          <ul>
            <li v-for="sub in item.foods" :key="sub.id">
              <img :src="sub.imgUrl" alt="" @click="toSon(sub)" />
              <div>
                <h4 @click="toSon(sub)">{{ sub.name }}</h4>
                <p>{{ sub.goodsDesc }}</p>
                <p>月售{{ sub.sellCount }}份 好评率{{ sub.rating }}%</p>
                <div>
                  <span><small>￥</small>{{ sub.price }}</span>
                  <del><small>￥</small>{{ (sub.price + 10).toFixed(2) }}</del>
                </div>
                <!-- 步进器 -->
                <van-stepper
                  input-width="20"
                  min="0"
                  default-value="0"
                  v-model="sub.count"
                  :show-minus="Boolean(sub.count)"
                  :show-input="!!sub.count"
                  theme="round"
                  button-size="22"
                  disable-input
                  @plus="ADD_DATA(sub)"
                  @minus="REDUCE_DATA(sub)"
                />
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getGoods } from '../../api/goods.js'
import BetterScroll from 'better-scroll'
export default {
  data() {
    return {
      list: [],
      curStr: '',
      boxHArr: []
    }
  },
  created() {
    this.getDatas()
  },
  mounted() {
    setTimeout(() => {
      const bs1 = new BetterScroll('.lef', {
        click: true
      })
      console.log(bs1)

      this.bs2 = new BetterScroll('.rig', {
        click: true,
        probeType: 2
      })
      this.calcHig()
      // 注册滚动的事件
      this.bs2.on('scroll', ({ y }) => {
        y = Math.abs(y)
        for (const k of this.boxHArr) {
          if (y >= k.min && y < k.max) {
            this.curStr = k.name
          }
        }
      })
    }, 300)
  },
  methods: {
    async getDatas() {
      const { goodsList } = await getGoods()
      console.log(goodsList)
      this.list = goodsList
      this.curStr = this.list[0].name
    },
    changeRig(s) {
      this.curStr = s
      this.bs2.scrollToElement(document.getElementById(s), 200)
    },
    calcHig() {
      // 计算盒子最大最小值的区间范围
      let min = 0
      this.list.forEach((item) => {
        const boxH = document.getElementById(item.name).offsetHeight
        this.boxHArr.push({
          min,
          max: boxH + min,
          name: item.name
        })
        min = boxH + min
      })
    }
  }
}
</script>

<style lang="less" scoped>
.good-box {
  height: 100%;
  display: flex;
  .lef {
    flex: 0 0 85px;
    background-color: #f4f5f7;
    color: #333;
    ul {
      li {
        padding: 0 12px;
        font-size: 14px;
        margin-top: -1px;
        &:nth-of-type(1) {
          span {
            border-top: 1px solid transparent;
          }
        }
        &:last-child {
          span {
            border-bottom: 1px solid #ddd;
          }
        }
        span {
          padding: 15px 0;
          display: block;
          border-top: 1px solid #ddd;
          line-height: 24px;
        }

        &.active {
          background-color: white;
          color: #f60;
          span {
            border-top: 1px solid transparent #ccc;
            display: block;
            padding: 20px 0;
          }

          + li {
            span {
              border-top: 1px solid transparent;
            }
          }
        }
      }
    }
  }
  .rig {
    flex: 1;
    overflow: hidden;

    ul {
      li {
        h3 {
          padding: 10px 0;
          background-color: #f4f5f7;
          border-left: 3px solid #dadde2;
          text-indent: 1em;
          font-weight: 700;
          color: #666;
        }
        img {
          flex: 0 0 80px;
          height: 80px;
          margin-right: 10px;
        }

        ul {
          li {
            padding: 15px;
            display: flex;
            color: #333;
            overflow: hidden;

            > div {
              flex: 1;
              overflow: hidden;
              position: relative;
              line-height: 1.5;
            }

            h3 {
              flex: 1;
              font-weight: 700;
              margin-bottom: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            p {
              color: #666;
              margin-bottom: 5px;
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            span {
              color: #f20;
              font-size: 15px;
              font-weight: bold;
              margin-right: 8px;

              small {
                font-size: 12px;
              }
            }
            del {
              font-weight: 700;
              font-size: 12px;
              color: #ccc;
              small {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}

.van-stepper {
  position: absolute;
  right: 2px;
  bottom: 0;
  /deep/.van-stepper__input {
    width: 22px;
  }
  /deep/.van-stepper__plus {
    background: #2395ff;
  }
  /deep/.van-stepper__minus {
    border: 1px solid #2395ff;
    color: #2395ff;
  }
}
</style>
